<!DOCTYPE html >
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>MainPage</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div class="layui-container" style="width: 100%">
  <ul class="layui-nav">
    <li class="layui-nav-item">
      <i class="layui-icon">&#xe68e;</i>
    </li>
    <li class="layui-nav-item">
      <input type="hidden" id="user_id" th:value="${user.getUserId()}"></input>
      <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">[[${user.userAccount}]]</a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;" modify-active="modify-form">修改信息</a></dd>
        <dd><a th:href="@{/user/logout}">退出</a></dd>
      </dl>
    </li>
  </ul>
  <div class="layui-row">
    <div class="layui-col-md2">
      <ul class="layui-timeline" th:each="timeline:${timelineList}">
        <li class="layui-timeline-item" th:if="${timelineStat.size}==0">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text" >
            <h3 class="layui-timeline-title"><a>create</a></h3>
            <p>您暂时没有动态</p>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title" th:text="${#dates.format(timeline.getCrtDatetime(),'yyyy-MM-dd HH:mm:ss')}"></h3>
            <p th:utext="${timeline.getContent()}">
            </p>
          </div>
        </li>
        <li class="layui-timeline-item" th:if="${timelineStat.last}">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text" >
            <h3 class="layui-timeline-title"><a>more</a></h3>
            <p></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="layui-col-md6 layui-col-md-offset1">
      <div class="layui-carousel" id="test1">
        <div carousel-item th:if="${urlList.size()}!=0" th:each="url:${urlList}">
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="${url.toString().trim()}"></a></div>
        </div>
        <div carousel-item th:if="${urlList.size()}==0">
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="@{/img/mainImg/main001.jpg}"></a></div>
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="@{/img/mainImg/main002.jpg}"></a></div>
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="@{/img/mainImg/main003.jpg}"></a></div>
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="@{/img/mainImg/main004.jpg}"></a></div>
          <div><a href="javascript:;"><img class="layui-anim-scaleSpring" style="width: 100%;height: 100%;" th:src="@{/img/mainImg/main005.jpg}"></a></div>
        </div>
      </div>
      <div class="layui-row grid-demo">
        <div class="layui-col-md12">
          <table style="width: 100%" class="layui-hide" id="userList"></table>
        </div>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-upload" style="margin-left: 2em">
      <button type="button" class="layui-btn layui-btn-normal" id="fileList">选择照片</button>
      <div class="layui-upload-list">
        <table class="layui-table">
          <thead>
          <tr>
            <th>文件名</th>
            <th>大小</th>
            <th>状态</th>
            <th>操作</th>
          </tr></thead>
          <tbody id="showFileList"></tbody>
        </table>
      </div>
      <button type="button" class="layui-btn" id="upLoadImages">开始上传</button>
    </div>
    </div>
  </div>
</div>
<script type="text/html" id="operation">
  <div>
    <button lay-even="kickOut"  id="{{d.userId}}" type="button" class="kickOut layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
      <i class="layui-icon">&#xe640;</i>踢出
    </button>
  </div>
</script>
<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
  layui.use(function(){
    var carousel = layui.carousel;
    var element=layui.element;
    var layer=layui.layer;
    var util = layui.util;
    var form =layui.form;
    var table=layui.table;
    var $ = layui.jquery
            ,upload = layui.upload;
    //触发事件 打开弹出层
    util.event('modify-active', {
      'modify-form': function() {
        layer.open({
          title: '修改信息',
          type: 1,
          area: '500px',
          skin: 'layui-layer-lan',
          btnAlign: 'c',
          content: $('#modifyForm')
        });
      }});
    //表单验证
    form.verify({
      username: function(value, item){ //value：表单的值、item：表单的DOM对象
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
        if(value === 'xxx'){
          alert('用户名不能为敏感词');
          return true;
        }
      }
      //我们既支持上述函数式的方式，也支持下述数组的形式
      //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
    });
    //监听提交
    form.on('submit(formModify)', function(data){
      layui.use('jquery',function(){
        var $=layui.$;
        $.ajax({
          type: 'post',
          url: '/user/update', // ajax请求路径
          data: $('#modifyForm').serialize(),
          success: function(data){
            if(data.code=='200'){
              alert(data.msg);
            }else{
              alert(data.msg);
            }
          },
          error: function (data) {
            alert(data.msg);
          }
        });
      });
      return false;//禁止跳转，否则会提交两次，且页面会刷新
    });
    //表格分页
    table.render({
      elem: '#userList'
      ,url:'/user/userList'
      ,limits: [3,5,10]  //一页选择显示3,5或10条数据
      ,limit: 5  //一页显示10条数据
      ,method: 'POST'
      ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
        var result;
        if (this.page.curr) {
          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        }
        else {
          result = res.data.slice(0, this.limit);
        }
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.count, //解析数据长度
          "data": result //解析数据列表
        };
      }
      ,page: true
      ,cols: [[
        {field:'userAccount', title: 'Account'}
        ,{field:'userName', title: 'Name'}
        ,{field:'crtDatetime', title: '日期',templet: function (row){
            return createTime(row.crtDatetime);
          }
        }
        ,{field:'userId', title:'操作', templet: '#operation' }
      ]]
    });
    //kickOut Button点击事件
    $(document).on('click','.kickOut',function(){
      var confirm=window.confirm("确认踢出？");
      if (confirm==false){
        return false;
      }
      $.ajax({
        url:'/user/kickOut',
        type:'post',
        data:{userId:$(this).attr('id')},
        success:function(data){
          if(data.status != '200'){
            alert("踢出成功");
          }else{
            alert("踢出成功");
          }
        },
        error:function () {
          alert("踢出失败");
        }
      });
    });
    //多文件列表示例
    var showFileList = $('#showFileList')
            ,uploadListIns = upload.render({
      elem: '#fileList'
      ,data: {
        user_id: function () {
          return $('#user_id').val();
        }
      }
      ,url: '/image/uploadImages' //改成您自己的上传接口
      ,accept: 'file'
      ,multiple: true  //允许多次调用接口上传所选图片
      ,auto: false
      ,bindAction: '#upLoadImages'
      ,choose: function(obj){
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function(index, file, result){
          var tr = $(['<tr id="upload-'+ index +'">'
            ,'<td>'+ file.name +'</td>'
            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
            ,'<td>等待上传</td>'
            ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
            ,'</td>'
            ,'</tr>'].join(''));

          //单个重传
          tr.find('.demo-reload').on('click', function(){
            obj.upload(index, file);
          });

          //删除
          tr.find('.demo-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
          });

          showFileList.append(tr);
        });
      }
      ,done: function(res, index, upload){
        console.log(res.code);
        if(res.code=="200"){ //上传成功
          var tr = showFileList.find('tr#upload-'+ index)
                  ,tds = tr.children();
          tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
          tds.eq(3).html(''); //清空操作
          return delete this.files[index]; //删除文件队列已经上传成功的文件
        }
        this.error(index, upload);
      }
      ,error: function(index, upload){
        var tr = showFileList.find('tr#upload-'+ index)
                ,tds = tr.children();
        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
      }
    });
    //轮播图 建造实例
    window.onload=carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always' //始终显示箭头
      ,anim: 'fade' //切换动画方式
      ,index: 0
      ,autoplay: true
      ,interval: 3000
      ,height: '30em'
    });
  });

  //时间戳格式化
  function createTime(v){
    var date = new Date(v);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m<10?'0'+m:m;
    var d = date.getDate();
    d = d<10?("0"+d):d;
    var h = date.getHours();
    h = h<10?("0"+h):h;
    var M = date.getMinutes();
    M = M<10?("0"+M):M;
    var str = y+"-"+m+"-"+d+" "+h+":"+M;
    return str;
  }
</script>
</body>
<!--弹出层表格（修改信息）-->
<form class="layui-form" action="" hidden id="modifyForm">
  <div class="layui-form-item">
    <label class="layui-form-label">Account</label>
    <div class="layui-input-block">
      <input type="text" name="userAccount" th:value="${user.getUserAccount()}" readonly autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Name</label>
    <div class="layui-input-block">
      <input type="text" name="userName" required th:value="${user.getUserName()}"  lay-verify="required|username" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Email</label>
    <div class="layui-input-block">
      <input type="text" name="userEmail" required th:value="${user.getUserEamil()}" lay-verify="required|email" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Tel</label>
    <div class="layui-input-block">
      <input type="text" name="userTel" required  th:value="${user.getUserTel()}" lay-verify="phone|number" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formModify">确认</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</html>